<template>
  <div class="wrapper">
    <v-chart :options="pieChartOptions" />
    <div>
      <v-chart :options="txTypeChartOptions" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    pieChartData: {
      type: Array,
      default: () => {
        return []
      }
    },
    txTypeData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    // 血管通路
    pieChartOptions() {
      const res = this.pieChartData
      const _data = []
      if (res) {
        const colors = ['#78CFF2', '#46B9BE', '#57C3FF', '#D16484', '#F49E59']
        res.map((item, index) => {
          _data.push({
            name: item.platformVascularAccess,
            value: item.totalQty,
            itemStyle: { color: colors[index] }
          })
        })
        return {
          title: {
            text: '血管通路分布',
            left: 'left',
            textStyle: {
              color: '#666',
              fontSize: 16,
              fontWeight: '700'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '0%',
            containLabel: true
          },
          series: [
            {
              type: 'pie',
              radius: [35, 65],
              // top: '0%',
              bottom: '0%',
              width: '500px',
              height: '280px',
              left: 'center',
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
              },
              label: {
                alignTo: 'edge',
                // formatter: '{name|{b}}\n{time|{c}%}',
                // minMargin: 5,
                // edgeDistance: 40,
                // lineHeight: 16,
                // rich: {
                //   time: {
                //     fontSize: 10,
                //     color: '#999'
                //   }
                // }
                formatter: (e) => {
                  let newStr = ''
                  let start = 0// 开始截取位置
                  let end = 0// 截取结束位置
                  const nameLen = e.name.length // 每个内容名称的长度
                  const maxName = 5// 每行显示的最大长度
                  const newRow = Math.ceil(nameLen / maxName)// 显示行数
                  if (nameLen > maxName) { // 如果名称长度大于每行最大显示长度，则
                    for (let i = 0; i < newRow; i++) { // 循环行数
                      let old = ''// 每次截取的字符
                      start = i * maxName// 截取的起点
                      end = start + maxName// 截取的终点
                      if (i === newRow - 1) { // 如果是最后一行
                        old = e.name.substring(start)
                      } else {
                        old = e.name.substring(start, end) + '\n'// 截取内容加换行
                      }
                      newStr += old// 拼接字符串
                    }
                  } else { // 否则不变显示
                    newStr = e.name
                  }
                  return newStr + e.value + '%'
                }
              },

              labelLine: {
                length: 20, // 第一段线长
                length2: 30, // 第二段线长
                length3: 20, // 第二段线长
                length4: 30, // 第二段线长
                maxSurfaceAngle: 20
              },

              data: _data
            }
          ]
        }
      }
      return null
    },
    // 透析方式
    txTypeChartOptions() {
      let res = this.txTypeData
      if (res) {
        const dashedPic =
          ''
        const color = ['#FF8700', '#ffc300', '#00e473', '#009DFF']
        const chartData = []
        res = res.slice(3, 7)
        res.map((item) => {
          chartData.push({
            name: item.dialysisMode,
            value: item.ratio,
            unit: '元',
            percent: item.percentage
          })
        })
        const arrName = []
        const arrValue = []
        let sum = 0
        const pieSeries = []
        const lineYAxis = []

        // 数据处理
        chartData.forEach((v, i) => {
          arrName.push(v.name)
          arrValue.push(v.value)
          sum = sum + v.value
        })

        // 图表option整理
        chartData.forEach((v, i) => {
          pieSeries.push({
            name: '',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: [60 - i * 15 + '%', 52 - i * 15 + '%'],
            center: ['30%', '55%'],
            label: {
              show: false
            },
            data: [
              {
                value: v.value,
                name: v.name
              },
              {
                value: sum - v.value,
                name: '',
                itemStyle: {
                  color: 'rgba(0,0,0,0)'
                }
              }
            ]
          })
          pieSeries.push({
            name: '',
            type: 'pie',
            silent: true,
            z: 0,
            clockWise: false, // 顺时加载
            hoverAnimation: false, // 鼠标移入变大
            radius: [60 - i * 15 + '%', 52 - i * 15 + '%'],
            center: ['30%', '55%'],
            label: {
              show: false
            },
            data: [
              {
                value: v.value, // 7.5,
                itemStyle: {
                  color: '#E3F0FF'
                }
              }
            ]
          })
          v.percent = ((v.value / sum) * 100).toFixed(1) + '%'
          lineYAxis.push({
            value: i,
            textStyle: {
              rich: {
                circle: {
                  color: color[i],
                  padding: [0, 0, 0, 50]
                }
              }
            }
          })
        })
        return {
          backgroundColor: 'transparent',
          title: {
            text: '透析方式',
            left: '30px',
            top: '0px',
            textStyle: {
              color: '#666',
              fontSize: 16,
              fontWeight: '700'
            }
          },
          color,
          grid: {
            top: '40px',
            bottom: '100px',
            left: '22%',
            containLabel: false
          },
          yAxis: [
            {
              type: 'category',
              inverse: true,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                backgroundColor: 'transparent',
                show: true,
                formatter(params) {
                  const item = chartData[params]
                  return (
                    '{circle|●}{name|' +
                    item.name +
                    '}{bd|}\r{percent|\r' +
                    item.percent +
                    '}'
                  )
                },
                // interval: 'auto',
                inside: true,
                textStyle: {
                  color: '#888',
                  fontSize: 12,
                  // height: '20px',
                  rich: {
                    line: {
                      width: 40,
                      // height: 15,
                      backgroundColor: { image: dashedPic }
                    },
                    name: {
                      color: '#666',
                      fontSize: 12
                    },
                    bd: {
                      color: '#ccc',
                      padding: [0, 1, 0, 0],
                      fontSize: 12
                    },
                    percent: {
                      color: '#333',
                      fontSize: 12
                    },
                    value: {
                      color: '#333',
                      fontSize: 12,
                      fontWeight: 500,
                      padding: [5, 0, 5, 30]
                    },
                    unit: {
                      fontSize: 12
                    }
                  }
                }
              },
              data: lineYAxis
            }
          ],
          xAxis: [
            {
              show: false
            }
          ],
          series: pieSeries
        }
      }
      return null
    }
  },
  methods: {},
  mounted() { }
}
</script>
<style lang="scss" scoped>
.wrapper {
  display: flex;
  width: 590px;
  .echarts {
    &:first-child {
      width: 310px !important;
      height: 100% !important;
    }
    &:last-child {
      // width: 180px;
      height: 100% !important;
    }
  }
}
</style>
